<template>
  <div
    v-show="showBox"
    id="verify"
    :class="mode == 'pop' ? 'mask' : ''"
  >
    <div
      :class="mode == 'pop' ? 'verifybox' : ''"
      :style="{ 'max-width': parseInt(imgSize.width) + 30 + 'px' }"
    >
      <div
        v-if="mode == 'pop'"
        class="verifybox-top"
      >
        {{ LANG.SECURITY_VERIFICATION }}
        <span
          class="verifybox-close"
          @click="closeBox"
        >
          <i class="verify-iconfont icon-close" />
        </span>
      </div>
      <div
        class="verifybox-bottom"
        :style="{ padding: mode == 'pop' ? '15px' : '0' }"
      >
        <!-- 验证码容器 -->
        <components
          :is="componentType"
          v-if="componentType"
          ref="instance"
          :captcha-type="captchaType"
          :type="verifyType"
          :figure="figure"
          :arith="arith"
          :mode="mode"
          :v-space="vSpace"
          :explain="explain"
          :img-size="imgSize"
          :block-size="blockSize"
          :bar-size="barSize"
          :default-img="defaultImg"
        />
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
/**
 * Verify 验证码组件
 * @description 分发验证码使用
 * */
import VerifySlide from './VerifySlide'
import VerifyPoints from './VerifyPoints'
import { CAPTCHA_TYPE } from '@/config/enums'
export default {
  name: 'Vue2Verify',
  components: {
    VerifySlide,
    VerifyPoints
  },
  props: {
    // 双语化
    locale: {
      require: false,
      type: String,
      default() {
        let language = navigator.browserLanguage
        // 默认语言不输入为浏览器语言
        if (navigator.language) {
          language = navigator.language
        }
        return language
      }
    },
    captchaType: {
      type: String,
      required: true
    },
    figure: {
      type: Number
    },
    arith: {
      type: Number
    },
    mode: {
      type: String,
      default: 'pop'
    },
    vSpace: {
      type: Number
    },
    explain: {
      type: String
    },
    imgSize: {
      type: Object,
      default() {
        return {
          width: '310px',
          height: '155px'
        }
      }
    },
    blockSize: {
      type: Object
    },
    barSize: {
      type: Object
    }
  },
  data() {
    return {
      // showBox:true,
      clickShow: false,
      // 内部类型
      verifyType: undefined,
      // 所用组件类型
      componentType: undefined,
      // 默认图片
      defaultImg: require('@/assets/img/login/default.jpg')
    }
  },
  computed: {
    instance() {
      return this.$refs.instance || {}
    },
    showBox() {
      if (this.mode == 'pop') {
        return this.clickShow
      } else {
        return true
      }
    }
  },
  watch: {
    captchaType: {
      immediate: true,
      handler(captchaType) {
        switch (captchaType.toString()) {
          case CAPTCHA_TYPE.BLOCK_PUZZLE:
            this.verifyType = '2'
            this.componentType = 'VerifySlide'
            break
          case CAPTCHA_TYPE.CLICK_WORD:
            this.verifyType = ''
            this.componentType = 'VerifyPoints'
            break
        }
      }
    }
  },
  mounted() {
    this.uuid()
  },
  methods: {
    // 生成 uuid
    uuid() {
      var s = []
      var hexDigits = '0123456789abcdef'
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
      }
      s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = '-'

      var slider = 'slider' + '-' + s.join('')
      var point = 'point' + '-' + s.join('')
      // 判断下是否存在 slider
      // console.log(localStorage.getItem('slider'))
      if (!localStorage.getItem('slider')) {
        localStorage.setItem('slider', slider)
      }
      if (!localStorage.getItem('point')) {
        localStorage.setItem('point', point)
      }
    },
    /**
     * i18n
     * @description 兼容vue-i18n 调用$t来转换ok
     * @param {String} text-被转换的目标
     * @return {String} i18n的结果
     * */
    i18n(text) {
      if (this.$t) {
        return this.$t(text)
      } else {
        // 兼容不存在的语言
        const i18n =
          this.$options.i18n.messages[this.locale] ||
          this.$options.i18n.messages['en-US']
        return i18n[text]
      }
    },
    /**
     * refresh
     * @description 刷新
     * */
    refresh() {
      if (this.instance.refresh) {
        this.instance.refresh()
      }
    },
    closeBox() {
      this.clickShow = false
      this.refresh()
    },
    show() {
      if (this.mode == 'pop') {
        this.clickShow = true
      }
    }
  }
}
</script>
<style lang="scss" >

@font-face {
  font-family: verify-iconfont;
  src: url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAV4AAsAAAAACEAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAARAAAAGA8RkmTY21hcAAAAYgAAABrAAABss4dnl1nbHlmAAAB9AAAAXwAAAHEKXVbMWhlYWQAAANwAAAALwAAADYfJztVaGhlYQAAA6AAAAAcAAAAJAfeA4ZobXR4AAADvAAAAA4AAAAUFAAAAGxvY2EAAAPMAAAADAAAAAwAqAFAbWF4cAAAA9gAAAAfAAAAIAEQAE5uYW1lAAAD+AAAAUAAAAJnEKM8sHBvc3QAAAU4AAAAPQAAAFJ0vntCeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGFhYJzAwMrAwNTJdIaBgaEfQjO+ZjBi5ACKMrAyM2AFAWmuKQwHnhk+O8zc8L+BgYH5DgOQZGBEUcQEAH5HDVR4nO2RsQ2AMAwEL4lBCDEKDRtkjrS0VKzILl4D7JiCIXjrIvsVuXgDA1CM1RBIJwnXYW7qfmHuvlBtnpnIZN206a7XfcO3f5XsX5T32Xb47pFfS3/rO4mnF3ja2gJLDN0Dv45eAfIAd7gb1wB4nEWPz07CQBDGZxbSsktA6JI2oGgskUaMJLalmPA/JiYYD0ZjEIgGDySQ6ANw4yW8c/IRvAJv4Ct41KMHONG6rSZmDrsz+33f/gYQwPPIB/FAAdjXi+iUKebrREM1JaOEA5aQwxJeuG8RVNIMB5S6MxZVuIxtbLO0ghHRZ5g7oyCyAEJNsoQsAEXHzuuyCNOllEYxjrtomSJcNR3bIMfIKBe2tbtmGU6RuSspLCdYjCFFGoymv6e7+pfKXIkGWn/w99+czCEJcKAbPvceorNLAvIY8yCA/iSHAehmwZoUIbh/kULwtlkE3N48tAy1oAWAdlGwypJfOd3IG3m77JQdy1S1nNhEraDp1FCsJmWxiDnd16U0VVMt1deJCi2UDCckfupc3dyPuh2rVLI63dH1S7ke4zw2jSvKNm+89ifjYaVerwzHk+fHh0YzQYhg5pjc2epftgtHttXpvfc6ln1W4xnf55uN1nmtOhx/j4fVGpont3dPCf4DdwBU6nicY2BkYGAAYkPbhBnx/DZfGbhZGEDgHvPvNQj6/34WBmZHIJeDgQkkCgAbQQo3AHicY2BkYGBu+N/AEMPCAAJAkpEBFbACAEcLAm54nGNhYGBgQcMAAQQAFQAAAAAAAAAmAF4AggDieJxjYGRgYGBlcGIA0QwMTEDMBYQMDP/BfAYAD1oBXwB4nIWRPW7CQBCFn8GQBJQoSqQ0aVYpKBLJ/JRIqVCgp6AHs+ZHttdaL0jUOU2OkBPkCOloc4pIedhDA0W82tlv3r6ZHckA7rCHh/K75y7ZwyWzkiu4wKNwlfqTsE9+Fq6hiZ5wnfqrcAMveBNusmPGDp5/xayFd2EPt/gQruAGn8JV6l/CPvlbuIYH/AjXqf8KNzDxroWbaHnhwOqp03M126lVaNLIpO54jvViE0/tqTzRNl+ZVHWDzlEa6VTbY5t8u+g5F6nImkQNeavj2KjMmrUOXbB0Luu325HoQWgSDGChMYVjnENhhh3jCiEMUkRFdGf5mO4FNohZaf91T+i2yKkfcoUuAnTOXCO60sJ5Ok2OLV/rUXV0K27LmoQ0lFrNSWKy4g883K2phNQDLIuqDH20uaITf1DMkPwB2JNvV3icY2BigAAuBuyAlZGJkZmRhZGVkY2BO7GoKL9ctygzPaOENTknvziVNTkjNTmbq6S0KA8izMAAAAKiDOgAAAA=') format('woff');
}

.verify-iconfont {
  font-style: normal;
  font-size: 16px;
  font-family: verify-iconfont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-right:before {
  content: "\e631";
}

.icon-close:before {
  content: "\e65a";
}

.icon-check:before {
  content: "\e663";
}

.icon-refresh:before {
  content: "\e6c3";
}
#verify {
  &.mask {
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .3);

    /* display: none; */
    transition: all .5s;
  }
  @import './css/verify.scss';
}

</style>